<template>
	<view class="p30">
		<textarea class="fs24" v-model="content" placeholder="说点什么吧" />
		<view class="h20 bg-f5"></view>
		<view class="flex col-center mt30 mb30" @click="selectType">
			<text>分类：</text>
			<text>{{typeText}}</text>
		</view>
		<view class="h20 bg-f5"></view>
		<view class="flex col-center mt30 mb30">
			<text>上传图片：</text>
		</view>
		<view class="flex flex-wrap col-center">
			<view class="mt20 text-center relative w210 radius10 mr20" style="overflow: hidden;" v-for="(item,index) in imgList" :key="index">
				<view class="bg-them color-f fs20 absolute top0 left0 w-max index99" @click="delImg(index)">删除</view>
				<image class="w210 h210" :src="item"></image>
			</view>
			<image class="w210 h210 mt20" src="../../static/image/upload_icon.png" @click="upload"></image>
		</view>
		<view class="text-center bg-them color-f radius20 p20 mt40" @click="commit">发布</view>
	</view>
</template>

<script>
	export default {
		name:"report",
		data() {
			return {
				imgList: [],
				content: '',
				imgIds: [],
				typeText: '请选择分类',
				categoryList: [],
				categoryId: ''
			};
		},
		onLoad() {
			this.getData()
		},
		methods: {
			// 获取分类
			getData () {
				this.$api.circleCategory().then(res => {
					this.categoryList = res.data
				})
			},
			// 选择分类
			selectType () {
				let arr = this.categoryList.map(item => item.title)
				let that = this
				uni.showActionSheet({
					itemList: arr,
					success(e) {
						let index = e.tapIndex
						that.typeText = that.categoryList[index].title
						that.categoryId = that.categoryList[index].id
					}
				})
			},
			
			// 提交数据
			commit () {
				this.$u.throttle(this.report, 2000)
			},
			report(){
				// 此处用法为在js中调用，需要写this.$u.throttle()
				this.$u.throttle(this.toNext, 500)
				this.$api.releaseCircle({category_id: this.categoryId, images: this.imgIds.toString(), name: this.content}).then(res => {
					this.$tool.msg(res.msg)
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				})
			},
			// 删除图片
			delImg (index) {
				this.imgList.splice(index, 1)
				this.imgIds.splice(index, 1)
			},
			// 上传图片
			upload () {
					uni.chooseImage({
						count:9,
						sizeType: ['original', 'compressed'],
						sourceType: ['album', 'camera'],
						success: res => {
							res.tempFilePaths.map(item => {
								uni.uploadFile({
									url: this.$baseUrl +'/index.php/system/Basic/postUploadOne', //仅为示例，非真实的接口地址
									filePath:item,
									fileType:'image',
									name: 'img',
									header: {
										Authorization: uni.getStorageSync('token')
									},
									success: r => {
										let imgData = JSON.parse(r.data)
										this.imgList.push(imgData.path)
										this.imgIds.push(imgData.id)
									}
								});
							})
							
						}
					})
					
			}
		}
	}
</script>

<style lang="scss">
page {
	background-color: #FFFFFF;
}
</style>
